// 注意此文件所包含导入的依赖文件，不能出现css选择器会重复很多冗余样式！！！
// 全局css样式请在global.scss 使用  且不能使用@extend进行继承样式

@mixin sizingBorder() {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@mixin input ($w, $h: null, $borderColor: #e5e5e5, $focusBorder: #32b3f7) {
  @if $h != null {
    height: $h;
  }
  width: $w;
  padding: 0 10px;
  border: 1px solid $borderColor;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-webkit-appearance: none;
  @include sizingBorder();
  transition: border .3s;
  &:hover {
    border-color: #ccc;
  }
  &:focus {
    border: 1px solid $focusBorder;
  }
}

@mixin flex () {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

// 按钮混合
@mixin btn-mixin($bg, $color:#fff, $borC:$bg, $aC: $color ) {
  &, &:focus {
    cursor: pointer;
    color: $color !important;
    background-color: $bg;
    outline: 0;
    border-radius: 2px;
    border: 1px solid $borC;
  }
  &:hover {
    $c: darken($bg, 10%);
    border-color: $c;
    background-color: $c;
    color: #fff !important;
    @if $bg == #fff {
      color: darken($color, 5%) !important;
    }
  }
  &:active {
    $c: darken($bg, 20%);
    border-color: $c;
    background-color: darken($bg, 16%);
    box-shadow: 0 0 10px 0px lighten($bg, 20%);
    -webkit-transition: box-shadow 200ms ease;
    -moz-transition: box-shadow 200ms ease;
    -ms-transition: box-shadow 200ms ease;
    -o-transition: box-shadow 200ms ease;
    transition: box-shadow 200ms ease;
  }
  &.btn-disabled, &.btn-disabled:hover, &.btn-disabled:active {
    $c: lighten($bg, 15%);
    background-color: #fff !important;
    cursor: no-drop;
    border-color: $c !important;
    color: $c !important;
  }
}

// 清除浮动
@mixin clearfix() {
  &:before, &:after{
    content: "";
    display: table;
    line-height: 0;
  }
  &:after{
    clear: both;
  }
}

// =================================================
//  modal
// =================================================
@mixin modalWrap ($zIndex: zIndex($zMain, modalWrap) + 1900) {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: $zIndex;
  white-space: nowrap;
  // 垂直居中内联元素必须要加
  &:after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
  }
}
@mixin modalShade ($zIndex: zIndex($zMain, modalShade) + 1900, $bg: rgba(#000, .2)) {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: $bg;
}
@mixin modal ($w, $h: null, $zIndex: zIndex($zMain, modal) + 1900, $bg: #fff, $title: true, $close: true) {
  width: $w;
  @if $h != null {
    height: $h;
  }
  position: relative;
  z-index: $zIndex;
  background: $bg;
  display: inline-block;
  vertical-align: middle;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  font-size: 18px;
  -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  text-align: left;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  @if $close {
    .close-btn {
      display: block;
    }
  } @else {
    .close-btn {
      display: none;
    }
  }
  @if $title {
    .title {
      display: block;
    }
  } @else {
    .title {
      display: none;
    }
  }
}

// 多行文本溢出
@mixin text-overflow-multi($n, $lh: 1.5) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $n;
  line-height: $lh;
  overflow: hidden;
}

// 块级warp居中
@mixin block-center () {
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
